<template>
	<div>
		<el-row type="flex" justify="center">
			<el-col :span="6">
				<div class="title">
					后台管理系统
				</div>
			</el-col>
		</el-row>
		<el-row type="flex" justify="center">
			<el-col :xs="10" :sm="8" :md="6" :lg="5" :xl="4">
				<div>
					<div>
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px">
							<el-form-item prop="username">
								<el-input v-model="ruleForm.username" placeholder="用户名">

								</el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">

								</el-input>
							</el-form-item>
							<div class="login-btn">
								<el-button type="primary" @click="submitForm('ruleForm')">
									登录
								</el-button>
							</div>
						</el-form>
					</div>

				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
import Http from '@/components/utils/httpUtil'
export default {
	data: function() {
		return {
			ruleForm: {
				username: '',
				password: ''
			},
			rules: {
				username: [
					{ required: true, message: '请输入用户名', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' }
				]
			}
		}

	},
	methods: {
		submitForm(formName) {
			const self = this;
			self.$refs[formName].validate((valid) => {
				if (valid) {
					let p = {};
					p.username = this.ruleForm.username
					p.password = this.ruleForm.password
					p.deviceType = 'web'
					Http.fetch('/member/login',p)
					.then(res=>{
						console.log(res)
						localStorage.setItem('userInfo',JSON.stringify(res.data))
						localStorage.setItem('token',res.data.token)
						localStorage.setItem('deptPid',res.data.deptPid)
						self.$router.push('/main');
					})
					.catch(err=>{
						let msg;
						if(err.code==3){
							msg = err.errMsg
						}else{
							msg = '用户名或密码错误'
						}
						this.$message({
							showClose: true,
							message: msg,
							type: "error"
						});
					})
				} else {
					console.log('error submit ');
					return false;
				}
			});
		}
	}
}
</script>

<style scoped>
.title {
	text-align: center;
	font-size: 35px;
	margin-top: 250px;
	margin-bottom: 20px;
	white-space:nowrap;
}

.login-btn button {
	width: 100%;
}
</style>
